Ionic এর মধ্যে State Management

State management হল এমন একটি প্রক্রিয়া যা অ্যাপ্লিকেশনের বিভিন্ন ভ্যারিয়েবল বা ডেটার অবস্থান (state) ট্র্যাক এবং পরিচালনা করার জন্য ব্যবহৃত হয়। Ionic অ্যাপ্লিকেশনেও state management খুবই গুরুত্বপূর্ণ, কারণ এতে অ্যাপের ভিন্ন ভিন্ন পেজ এবং কম্পোনেন্টগুলির মধ্যে ডেটা শেয়ার এবং সিঙ্ক্রোনাইজ করা যায়।

Ionic অ্যাপ্লিকেশন সাধারণত Angular এর উপর ভিত্তি করে তৈরি হয়, তাই Angular এর state management প্যাটার্নও Ionic অ্যাপ্লিকেশনে ব্যবহৃত হয়। Ionic অ্যাপ্লিকেশনের জন্য কিছু জনপ্রিয় state management টুলস হলো NgRx, Akita, NgXs, এবং BehaviorSubject (RxJS)।

এখানে Ionic অ্যাপ্লিকেশনের মধ্যে state management এর বিভিন্ন পদ্ধতি নিয়ে আলোচনা করা হলো:

১. BehaviorSubject (RxJS) দিয়ে State Management

RxJS হল Angular এবং Ionic অ্যাপ্লিকেশনগুলির জন্য একটি শক্তিশালী লাইব্রেরি, যা reactive programming এবং asynchronous ডেটা পরিচালনা করতে সাহায্য করে। BehaviorSubject একটি বিশেষ ধরনের Observable যা অ্যাপ্লিকেশনের স্টেট ট্র্যাক করতে ব্যবহৃত হয়। এটি সর্বশেষ মানটি রাখতে পারে এবং যখনই এর value পরিবর্তিত হয়, তখন তা subscribe করা সকল সাবস্ক্রাইবারকে জানিয়ে দেয়।

১.১ BehaviorSubject উদাহরণ

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class StateService {

  private stateSubject = new BehaviorSubject<any>({ user: null });
  public state$ = this.stateSubject.asObservable();

  constructor() {}

  setState(newState: any) {
    this.stateSubject.next(newState);
  }

  getState() {
    return this.state$.getValue();
  }
}

এখানে StateService একটি সিঙ্গলটন সার্ভিস হিসেবে কাজ করছে এবং BehaviorSubject দিয়ে অ্যাপের স্টেট পরিচালনা করছে।

১.২ State Access করা

এখন, অ্যাপের যেকোনো কম্পোনেন্ট থেকে আপনি StateService ব্যবহার করে স্টেট অ্যাক্সেস বা আপডেট করতে পারবেন।

import { Component, OnInit } from '@angular/core';
import { StateService } from './state.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage implements OnInit {

  user: any;

  constructor(private stateService: StateService) {}

  ngOnInit() {
    this.stateService.state$.subscribe(state => {
      this.user = state.user;
    });
  }

  updateState() {
    this.stateService.setState({ user: { name: 'John Doe' } });
  }
}

এখানে, HomePage কম্পোনেন্টে StateService থেকে স্টেট সাবস্ক্রাইব করা হয়েছে এবং যখনই updateState() কল করা হবে, তখন স্টেট আপডেট হবে এবং UI তে পরিবর্তন দেখাবে।

২. NgRx দিয়ে State Management

NgRx একটি জনপ্রিয় state management লাইব্রেরি যা Redux এর আদলে কাজ করে এবং Angular অ্যাপ্লিকেশনগুলিতে ব্যবহৃত হয়। NgRx এর মাধ্যমে আপনি অ্যাপ্লিকেশনের state গুলি এক centralized store-এ রাখতে পারেন এবং সেগুলি mutate (update) করতে Actions এবং Reducers ব্যবহার করতে পারেন।

২.১ NgRx Store Setup

1. NgRx ইনস্টল করা:

npm install @ngrx/store @ngrx/effects

2. Store Setup:

Store সেটআপ করতে প্রথমে অ্যাপের স্টেট, অ্যাকশন এবং রিডিউসার তৈরি করতে হবে।

State Interface:

export interface AppState {
  user: { name: string };
}

Actions:

import { createAction, props } from '@ngrx/store';

export const setUser = createAction(
  '[User] Set User',
  props<{ user: { name: string } }>()
);

Reducer:

import { createReducer, on } from '@ngrx/store';
import { setUser } from './user.actions';

export const initialState = { user: null };

const _userReducer = createReducer(
  initialState,
  on(setUser, (state, { user }) => ({ ...state, user }))
);

export function userReducer(state: any, action: any) {
  return _userReducer(state, action);
}

3. App Module Configuration:

import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { userReducer } from './store/user.reducer';

@NgModule({
  imports: [
    StoreModule.forRoot({ userState: userReducer })
  ]
})
export class AppModule {}

4. State Access and Update:

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { setUser } from './store/user.actions';

@Component({
  selector: 'app-home',
  templateUrl: './home.page.html',
  styleUrls: ['./home.page.scss'],
})
export class HomePage {

  user$ = this.store.select(state => state.userState.user);

  constructor(private store: Store) {}

  updateUser() {
    this.store.dispatch(setUser({ user: { name: 'Jane Doe' } }));
  }
}

এখানে store.select() ব্যবহার করে অ্যাপের state এর user অংশের সাবস্ক্রাইব করা হচ্ছে এবং store.dispatch() দিয়ে স্টেট আপডেট করা হচ্ছে।

৩. Akita এবং NgXs

Akita এবং NgXs হল Angular-এ আরও সহজভাবে state management করার জন্য দুটি শক্তিশালী লাইব্রেরি। এগুলির মধ্যে NgRx এর মতো Redux স্টাইলের state management রয়েছে, তবে এগুলি আরও কমপ্লেক্স এবং boilerplate কোড কম হয়।

• Akita: এটি একটি স্টেট ম্যানেজমেন্ট লাইব্রেরি যা ইমিউটেবল স্টেট হ্যান্ডলিং, স্কোপড স্টোর এবং ইন্টারনাল স্টোর এর মতো অনেক সুবিধা দেয়।
• NgXs: এটি Redux ভিত্তিক স্টেট ম্যানেজমেন্ট লাইব্রেরি যা state store এভেইলেবল, সিঙ্ক্রোনাস ও অ্যাসিনক্রোনাস ফিচার দেয়।

সারাংশ

Ionic অ্যাপ্লিকেশনের মধ্যে state management একটি গুরুত্বপূর্ণ ভূমিকা পালন করে, কারণ এতে অ্যাপের বিভিন্ন পেজ এবং কম্পোনেন্টগুলির মধ্যে ডেটা শেয়ার করা যায়। BehaviorSubject (RxJS) দিয়ে সহজ এবং কার্যকরীভাবে state পরিচালনা করা যায়, এবং NgRx বা Akita ব্যবহার করে আরও উন্নত এবং স্কেলেবল state management তৈরি করা সম্ভব।

State management প্যাটার্নগুলো Angular এবং Ionic অ্যাপ্লিকেশনগুলিতে ডেটার সিঙ্ক্রোনাইজেশন এবং ম্যানেজমেন্টকে সহজ এবং কার্যকর করে তোলে, বিশেষ করে যখন অ্যাপটি বড় এবং জটিল হয়ে যায়।

State Management হলো একটি কৌশল বা প্রক্রিয়া যার মাধ্যমে অ্যাপ্লিকেশনের সমস্ত ডেটা এবং ইউজারের অবস্থান সঠিকভাবে ম্যানেজ করা হয়। এই ডেটা বা অবস্থানটি অ্যাপ্লিকেশন এর বিভিন্ন অংশে ব্যবহার করা হয়। State Management ব্যবহৃত হয় যখন অ্যাপ্লিকেশনটি বড় হয়ে ওঠে এবং একাধিক কম্পোনেন্টে একই ডেটা প্রয়োজন হয়। এটি নিশ্চিত করে যে অ্যাপ্লিকেশনটি ডেটার মধ্যে সামঞ্জস্য বজায় রাখে এবং ডেটার পরিবর্তনগুলির প্রভাব দ্রুত এবং সঠিকভাবে সকল জায়গায় প্রতিফলিত হয়।

State এর ধারণা

State হলো একটি অ্যাপ্লিকেশনের বর্তমান অবস্থা যা ইউজারের ইন্টারঅ্যাকশনের ফলস্বরূপ পরিবর্তিত হয়। উদাহরণস্বরূপ, একজন ইউজার ফর্মে তথ্য প্রদান করছে, অ্যাপ্লিকেশন একটি পেজে স্ক্রল হচ্ছে, বা একটি বাটনে ক্লিক করার ফলে কিছু তথ্য পরিবর্তিত হচ্ছে — এই সবই অ্যাপ্লিকেশনের state-এর অংশ।

State Management এর প্রয়োজনীয়তা

1. ডেটার একত্রিতকরণ:
   • অ্যাপ্লিকেশনের বিভিন্ন অংশে একই ডেটার প্রয়োজন হতে পারে, এবং state management নিশ্চিত করে যে ডেটা এক কেন্দ্রীয় জায়গায় সংরক্ষিত হবে। এতে বিভিন্ন কম্পোনেন্টের মধ্যে ডেটার অপ্রয়োজনীয় ডুপ্লিকেশন এড়ানো যায়।
2. কম্পোনেন্টের মধ্যে ডেটা শেয়ারিং:
   • Angular বা React এর মতো ফ্রেমওয়ার্কে, একটি কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে ডেটা পাস করতে state management ব্যবহৃত হয়। এটি জটিল অ্যাপ্লিকেশনগুলিতে খুবই কার্যকর, যেখানে অনেক কম্পোনেন্টে ডেটা প্রয়োজন।
3. ডেটার সামঞ্জস্য বজায় রাখা:
   • যখন ডেটা পরিবর্তিত হয়, তখন এই পরিবর্তনটি অ্যাপ্লিকেশনের সমস্ত জায়গায় সঠিকভাবে প্রতিফলিত হতে হবে। State management এর মাধ্যমে, অ্যাপ্লিকেশন নিশ্চিত করে যে, এক স্থানে ডেটা পরিবর্তন হলে, অন্যান্য অংশও তা উপলব্ধ পায়।
4. ইউজার ইন্টারফেসের স্থিতিশীলতা:
   • State management সাহায্য করে ইউজার ইন্টারফেস (UI) কে স্থিতিশীল রাখতেও। ইউজার যখন কোনো একশন নেয়, তখন UI অটোমেটিকভাবে ডেটা অনুযায়ী আপডেট হয়। যেমন, ইউজার লগইন করলে পুরো অ্যাপ্লিকেশনটি সেই পরিবর্তনটি মেনে নেয়।
5. অ্যাপ্লিকেশন স্কেলযোগ্যতা:
   • অ্যাপ্লিকেশনটি বড় হওয়ার সাথে সাথে, সঠিকভাবে state manage না করলে কোড জটিল হয়ে যেতে পারে। State management টুলস যেমন Redux, NgRx (Angular), Vuex (Vue.js) ইত্যাদি ব্যবহার করলে অ্যাপ্লিকেশন স্কেল করা সহজ হয়।
6. ডিবাগিং এবং টেস্টিং:
   • State management টুলসের সাহায্যে অ্যাপ্লিকেশনের state ট্র্যাক করা সহজ হয়। এতে ডিবাগিং প্রক্রিয়া উন্নত হয়, এবং আপনাকে কোডের কোথাও কোনো সমস্যা বা ডেটা পরিবর্তন সঠিকভাবে ট্র্যাক করতে সাহায্য করে।

State Management এর প্রকারভেদ

1. Local State:

   • এটি কম্পোনেন্টের নিজস্ব ডেটা বা অবস্থা। সাধারণত ছোট বা সিম্পল অ্যাপ্লিকেশনের জন্য উপযুক্ত। React বা Angular এর মতো ফ্রেমওয়ার্কে state একটি কম্পোনেন্টের মধ্যে থাকে এবং এটি অন্য কম্পোনেন্টের সাথে শেয়ার হয় না।

   উদাহরণ: React এর useState() হুকের মাধ্যমে local state ম্যানেজ করা হয়।

2. Global State:

   • এটি অ্যাপ্লিকেশনের যে কোনো কম্পোনেন্টের দ্বারা এক্সেসযোগ্য ডেটা। সাধারণত বড় অ্যাপ্লিকেশনে, যেখানে একাধিক কম্পোনেন্টের মধ্যে একই ডেটা শেয়ার করার প্রয়োজন হয়, global state ব্যবহৃত হয়।

   উদাহরণ: Redux (React), NgRx (Angular), Vuex (Vue.js) ইত্যাদি।

3. Server State:

   • এটি সাধারণত ব্যাকএন্ড বা API এর মাধ্যমে আসা ডেটার সাথে সম্পর্কিত। যখন অ্যাপ্লিকেশন কোনো রিমোট সার্ভিস থেকে ডেটা নিয়ে আসে এবং সেটি অ্যাপ্লিকেশনে প্রক্রিয়া করা হয়, তখন server state ব্যবহৃত হয়।

   উদাহরণ: API কলের মাধ্যমে আসা ডেটা।

4. Session State:
   • এটি শুধুমাত্র ব্যবহারকারীর সেশনের জন্য প্রযোজ্য। এটি প্রক্রিয়াজাত ডেটা বা তথ্য যেগুলি ব্যবহারকারী কোনো সাইটে প্রবেশের সময় অথবা সেশন চলাকালীন ব্যবহার করে।

State Management Tools

1. Redux:
   • এটি JavaScript অ্যাপ্লিকেশনের জন্য একটি জনপ্রিয় state management লাইব্রেরি। Redux এর মাধ্যমে অ্যাপ্লিকেশনের সমস্ত state একটি কেন্দ্রীয় store-এ থাকে এবং তা কেবল actions এর মাধ্যমে পরিবর্তন করা হয়।
2. NgRx:
   • Angular অ্যাপ্লিকেশনের জন্য Redux এর মতো একটি state management লাইব্রেরি। এটি RxJS এবং Redux এর ধারণা ব্যবহার করে, যা Angular এ reactive state management এর জন্য খুবই জনপ্রিয়।
3. Vuex:
   • এটি Vue.js এর জন্য state management টুল, যা Vue অ্যাপ্লিকেশনের জন্য centralized state management প্রদান করে।
4. Context API (React):
   • React এর Context API একটি built-in state management টুল, যা ছোট থেকে মাঝারি অ্যাপ্লিকেশনের জন্য উপযুক্ত।
5. MobX:
   • MobX একটি JavaScript লাইব্রেরি যা ডিক্লেয়ারেটিভ state management এবং reactive programming কৌশল ব্যবহার করে।

সারাংশ

State Management অ্যাপ্লিকেশনের একটি গুরুত্বপূর্ণ অংশ, যেটি ডেটার স্টোরেজ, শেয়ারিং, এবং আপডেটের সঠিক প্রক্রিয়া নিশ্চিত করে। বড় অ্যাপ্লিকেশনে, যেখানে একাধিক কম্পোনেন্টে একই ডেটা দরকার, state management একটি অপরিহার্য কৌশল। এটি অ্যাপ্লিকেশনের স্কেলযোগ্যতা, ডিবাগিং এবং ইউজার ইন্টারফেসের স্থিতিশীলতা বজায় রাখতে সাহায্য করে।

Angular অ্যাপে, Services এবং Dependency Injection (DI) একটি শক্তিশালী উপায় যা বিভিন্ন কম্পোনেন্টের মধ্যে ডেটা শেয়ার করতে ব্যবহৃত হয়। Services হল একটি বিশেষ ক্লাস যা অ্যাপের বিভিন্ন কম্পোনেন্টে শেয়ারযোগ্য লজিক বা ডেটা প্রদান করে। Dependency Injection (DI) একটি ডিজাইন প্যাটার্ন যা কম্পোনেন্টগুলির মধ্যে ডেটা শেয়ার করতে সাহায্য করে এবং Angular এই প্রক্রিয়াটি স্বয়ংক্রিয়ভাবে পরিচালনা করে।

এখানে একটি বাস্তব উদাহরণ দেওয়া হলো যেখানে Services এবং Dependency Injection ব্যবহার করে এক কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে ডেটা শেয়ার করা হবে।

১. Service তৈরি করা

প্রথমে একটি DataService তৈরি করুন যা ডেটা শেয়ার করবে।

ionic generate service data

এই কমান্ডটি data.service.ts ফাইল তৈরি করবে।

১.১ DataService এ ডেটা রাখা

এখন data.service.ts ফাইলে একটি সিম্পল ডেটা প্রপার্টি এবং একটি মেথড তৈরি করুন, যা ডেটা প্রদান করবে।

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataService {

  private data: string = "Hello from DataService!";

  constructor() { }

  // ডেটা ফেরত দেওয়া
  getData(): string {
    return this.data;
  }

  // ডেটা সেট করা
  setData(newData: string): void {
    this.data = newData;
  }
}

এখানে:

• data একটি প্রাইভেট ভেরিয়েবল যা ডেটা সংরক্ষণ করবে।
• getData() মেথডটি ডেটা ফেরত দেবে।
• setData() মেথডটি নতুন ডেটা সেট করতে সাহায্য করবে।

২. DataService ব্যবহার করে Data Sharing

এখন, আমরা দুটি কম্পোনেন্ট তৈরি করবো এবং সেগুলির মধ্যে ডেটা শেয়ার করার জন্য DataService ব্যবহার করবো।

২.১ কম্পোনেন্ট ১ - HomePage (ডেটা পাঠানো)

প্রথমে একটি HomePage কম্পোনেন্ট তৈরি করুন, যেখানে আমরা DataService ব্যবহার করে ডেটা সেট করব।

ionic generate page home

এখন, home.page.ts ফাইলে DataService ইনজেক্ট করুন এবং ডেটা সেট করুন।

import { Component } from '@angular/core';
import { DataService } from '../data.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(private dataService: DataService) {}

  // ডেটা সেট করা
  setData() {
    this.dataService.setData("New data set from HomePage!");
  }
}

এখানে:

• DataService কে DI এর মাধ্যমে ইনজেক্ট করা হয়েছে।
• setData() মেথডটি DataService এর মাধ্যমে নতুন ডেটা সেট করছে।

২.২ কম্পোনেন্ট ২ - AboutPage (ডেটা গ্রহণ করা)

এখন, AboutPage কম্পোনেন্টে ডেটা গ্রহণ করার জন্য DataService ব্যবহার করুন।

ionic generate page about

এখন, about.page.ts ফাইলে DataService ইনজেক্ট করুন এবং getData() মেথডের মাধ্যমে ডেটা গ্রহণ করুন।

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';

@Component({
  selector: 'app-about',
  templateUrl: 'about.page.html',
  styleUrls: ['about.page.scss'],
})
export class AboutPage implements OnInit {

  data: string;

  constructor(private dataService: DataService) {}

  ngOnInit() {
    // ডেটা গ্রহণ করা
    this.data = this.dataService.getData();
  }
}

এখানে:

• DataService ইনজেক্ট করা হয়েছে।
• ngOnInit() মেথডে getData() মেথডটি কল করে ডেটা নেওয়া হয়েছে।

২.৩ HomePage এবং AboutPage এর মধ্যে নেভিগেশন

এখন, আমরা HomePage থেকে AboutPage এ নেভিগেট করতে Ionic Routing ব্যবহার করব।

home.page.html ফাইলে একটি বাটন যোগ করুন, যা AboutPage এ নেভিগেট করবে।

<ion-content>
  <ion-button (click)="setData()">Set Data</ion-button>
  <ion-button routerLink="/about">Go to About Page</ion-button>
</ion-content>

এখানে, প্রথম বাটনটি setData() মেথড কল করবে, যা DataService এর মাধ্যমে ডেটা সেট করবে। দ্বিতীয় বাটনটি /about রাউটিং এ নেভিগেট করবে, যেখানে ডেটা প্রদর্শিত হবে।

৩. Final Testing

এখন, আপনি যখন HomePage এ ডেটা সেট করবেন এবং AboutPage এ গিয়ে ডেটা দেখতে পারবেন। HomePage তে "Set Data" বাটনে ক্লিক করলে AboutPage তে নতুন সেট করা ডেটা দেখানো হবে।

সারাংশ

• Services Angular অ্যাপে এমন একটি শ্রেণী যা অ্যাপের বিভিন্ন অংশে শেয়ারযোগ্য ডেটা বা লজিক প্রদান করে।
• Dependency Injection (DI) এর মাধ্যমে Angular কম্পোনেন্ট এবং সার্ভিসের মধ্যে সম্পর্ক স্থাপন করে।
• আমরা DataService তৈরি করে এক কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে ডেটা শেয়ার করেছি।
• setData() এবং getData() মেথড ব্যবহার করে ডেটা এক কম্পোনেন্ট থেকে অন্য কম্পোনেন্টে পাঠানো এবং গ্রহণ করা হয়েছে।

এই পদ্ধতি ব্যবহার করে আপনি সহজেই অ্যাপের মধ্যে ডেটা শেয়ার করতে পারবেন এবং Angular অ্যাপ্লিকেশনের স্থিতিশীলতা ও স্কেলেবিলিটি বাড়াতে পারবেন।

Angular অ্যাপ্লিকেশনগুলিতে State Management হল এমন একটি পদ্ধতি যা অ্যাপ্লিকেশনের মধ্যে ডেটা এবং ইউজার ইন্টারঅ্যাকশন পরিচালনা করে। NgRx হল একটি Reactive State Management লাইব্রেরি যা Angular অ্যাপ্লিকেশনের জন্য তৈরি করা হয়েছে এবং এটি Redux এর উপর ভিত্তি করে। NgRx ব্যবহার করে অ্যাপ্লিকেশনের স্টেট সেন্ট্রালাইজড এবং রিএকটিভভাবে ম্যানেজ করা যায়।

NgRx এর মৌলিক কনসেপ্ট

NgRx এ store, actions, reducers, এবং effects এর মাধ্যমে স্টেট ম্যানেজমেন্ট পরিচালনা করা হয়। এখানে মূল উপাদানগুলি নিম্নরূপ:

• Store: অ্যাপ্লিকেশনের সেন্ট্রালাইজড স্টেট।
• Actions: স্টেট পরিবর্তনের জন্য বার্তা।
• Reducers: স্টেট পরিবর্তন করার লজিক।
• Effects: অ্যসিনক্রোনাস অপারেশন (যেমন HTTP রিকোয়েস্ট) পরিচালনা করার জন্য ব্যবহৃত হয়।

১. NgRx ইনস্টলেশন

প্রথমে আপনাকে NgRx ইনস্টল করতে হবে:

ng add @ngrx/store

এটি আপনার অ্যাপ্লিকেশনে NgRx এবং তার dependencies ইনস্টল করবে।

২. Store সেটআপ

Store হলো অ্যাপ্লিকেশনের সেন্ট্রাল স্টেট যেখানে অ্যাপের সমস্ত ডেটা সঞ্চিত থাকে। প্রথমে StoreModule ইম্পোর্ট করতে হবে আপনার মূল মডিউলে।

Store Setup Example

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule } from '@ngrx/store';
import { AppComponent } from './app.component';
import { counterReducer } from './store/counter.reducer';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    StoreModule.forRoot({ counter: counterReducer }) // Store setup
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

এখানে, আমরা counter নামক স্টেটকে counterReducer দিয়ে ম্যানেজ করছি।

৩. Actions

Actions হলো বার্তা বা সিগন্যাল যা স্টেট পরিবর্তন করতে সাহায্য করে। প্রতিটি অ্যাকশন সাধারণত একটি টাইক এবং পে লোড থাকে, যেটি একটি নির্দিষ্ট স্টেট পরিবর্তন করার জন্য ব্যবহৃত হয়।

Actions Example

import { createAction } from '@ngrx/store';

export const increment = createAction('[Counter Component] Increment');
export const decrement = createAction('[Counter Component] Decrement');

এখানে, দুটি অ্যাকশন তৈরি করা হয়েছে: increment এবং decrement।

৪. Reducers

Reducers হলো ফাংশন যা অ্যাকশনের উপর ভিত্তি করে স্টেট পরিবর্তন করে। Reducer স্টেটের বর্তমান মান এবং অ্যাকশন ইনপুট হিসেবে নিয়ে নতুন স্টেট রিটার্ন করে।

Reducer Example

import { createReducer, on } from '@ngrx/store';
import { increment, decrement } from './counter.actions';

export const initialState = 0;

export const counterReducer = createReducer(
  initialState,
  on(increment, state => state + 1),
  on(decrement, state => state - 1)
);

এখানে, counterReducer ফাংশনটি increment এবং decrement অ্যাকশনের জন্য স্টেট পরিবর্তন করবে। on ফাংশনটি অ্যাকশন এবং তার সাথে সম্পর্কিত স্টেট পরিবর্তন লজিক সংজ্ঞায়িত করে।

৫. Store থেকে ডেটা নির্বাচন (Selectors)

Selectors হলো ফাংশন যা store থেকে নির্দিষ্ট ডেটা নির্বাচন করতে সাহায্য করে। এটি অ্যাপ্লিকেশনের অন্যান্য অংশে ব্যবহার করার জন্য স্টেটকে পাস করে।

Selector Example

import { createFeatureSelector, createSelector } from '@ngrx/store';

export const selectCounter = createFeatureSelector<number>('counter');

export const selectCounterValue = createSelector(
  selectCounter,
  (state: number) => state
);

এখানে, selectCounter হল একটি ফিচার সিলেক্টর যা counter স্টেট নির্বাচন করে এবং selectCounterValue হল একটি সিলেক্টর যা সেই মানটি রিটার্ন করে।

৬. Components এ Store ব্যবহার করা

স্টোরে রাখা ডেটা কম্পোনেন্টে ব্যবহার করতে Store ইঞ্জেক্ট করতে হবে এবং select ফাংশন দিয়ে ডেটা গ্রহণ করতে হবে। অ্যাকশনের জন্য dispatch ব্যবহার করা হয়।

Component Example

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { increment, decrement } from './store/counter.actions';
import { selectCounterValue } from './store/counter.selectors';

@Component({
  selector: 'app-root',
  template: `
    <div>
      <button (click)="increment()">Increment</button>
      <button (click)="decrement()">Decrement</button>
      <h1>{{ counter$ | async }}</h1>
    </div>
  `
})
export class AppComponent {
  counter$ = this.store.select(selectCounterValue);

  constructor(private store: Store) {}

  increment() {
    this.store.dispatch(increment());
  }

  decrement() {
    this.store.dispatch(decrement());
  }
}

এখানে, counter$ হলো observable যা selectCounterValue সিলেক্টরের মাধ্যমে store থেকে ডেটা নেয় এবং UI তে দেখানো হয়। increment() এবং decrement() মেথডগুলি স্টেটে পরিবর্তন আনার জন্য dispatch ব্যবহার করে।

৭. Effects (অ্যাসিনক্রোনাস অপারেশন)

NgRx Effects ব্যবহৃত হয় অ্যাসিনক্রোনাস অপারেশন যেমন HTTP কল, API রিকোয়েস্ট ইত্যাদি পরিচালনা করতে।

Effect Example

import { Injectable } from '@angular/core';
import { Actions, ofType } from '@ngrx/effects';
import { Observable } from 'rxjs';
import { map, mergeMap } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
import { loadData, loadDataSuccess } from './data.actions';

@Injectable()
export class DataEffects {

  loadData$ = createEffect(() => this.actions$.pipe(
    ofType(loadData),
    mergeMap(() => this.http.get('https://api.example.com/data')
      .pipe(
        map(data => loadDataSuccess({ data }))
      ))
  ));

  constructor(
    private actions$: Actions,
    private http: HttpClient
  ) {}
}

এখানে, DataEffects একটি অ্যাসিনক্রোনাস অপারেশন পরিচালনা করছে যা loadData অ্যাকশন ট্রিগার হলে HTTP রিকোয়েস্ট করে এবং সফল হলে loadDataSuccess অ্যাকশন ডিসপ্যাচ করে।

সারাংশ

• Store: স্টেট সেন্ট্রালাইজড ম্যানেজমেন্টে ব্যবহৃত হয়।
• Actions: স্টেট পরিবর্তনের জন্য অ্যাকশন বার্তা।
• Reducers: স্টেট পরিবর্তন করার লজিক।
• Selectors: স্টেট থেকে ডেটা নির্বাচন করে।
• Effects: অ্যাসিনক্রোনাস অপারেশন পরিচালনা করে, যেমন API কল।

NgRx ব্যবহার করে, আপনি অ্যাঙ্গুলার অ্যাপ্লিকেশনে একটি ক্লিন, মেনটেইনেবল এবং স্কেলেবল স্টেট ম্যানেজমেন্ট সিস্টেম তৈরি করতে পারেন, যা রিএকটিভ প্যাটার্ন ব্যবহার করে সিঙ্ক্রোনাস এবং অ্যাসিনক্রোনাস ডেটা ফ্লো ম্যানেজ করে।

State Management অ্যাপ্লিকেশনের মধ্যে ডেটার পরিবর্তন এবং সেগুলোর ট্র্যাকিং করা, বিশেষত যখন সেই ডেটা অ্যাপের বিভিন্ন কম্পোনেন্টের মধ্যে শেয়ার করা হয়। Angular এ Application-wide state management অনেক কার্যকরী হতে পারে যখন অ্যাপের ডেটা বিভিন্ন কম্পোনেন্টে শেয়ার করতে হয়।

এখানে NgRx এবং Service-based State Management সহ দুটি পদ্ধতির উদাহরণ দেওয়া হলো:

১. Service-based State Management

Angular অ্যাপে সহজ State Management এর জন্য আপনি একটি Service ব্যবহার করতে পারেন। এই পদ্ধতিতে, আপনি অ্যাপের ডেটা একটি সিঙ্গেল সার্ভিসে ম্যানেজ করবেন এবং সেই সার্ভিসটিকে প্রয়োজনীয় কম্পোনেন্টে ইনজেক্ট করবেন।

১.১ State Service তৈরি করা

প্রথমে একটি state.service.ts ফাইল তৈরি করুন যেখানে আপনার অ্যাপ্লিকেশনের স্টেট সংরক্ষিত থাকবে।

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class StateService {
  private counterSubject = new BehaviorSubject<number>(0);
  counter$ = this.counterSubject.asObservable();

  increment() {
    this.counterSubject.next(this.counterSubject.value + 1);
  }

  decrement() {
    this.counterSubject.next(this.counterSubject.value - 1);
  }
}

• BehaviorSubject: এটি একটি RxJS সাবজেক্ট যা একটি ইনিশিয়াল ভ্যালু দিয়ে শুরু হয় এবং সাবস্ক্রাইবারদের অ্যাপ্লিকেশনের স্টেটের বর্তমান মান সরবরাহ করে।

১.২ কম্পোনেন্টে সার্ভিস ব্যবহার করা

এখন আপনার কম্পোনেন্টে StateService ইনজেক্ট করে স্টেট ম্যানেজমেন্ট করতে পারবেন।

import { Component } from '@angular/core';
import { StateService } from './state.service';

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.scss'],
})
export class CounterComponent {
  counter$ = this.stateService.counter$;

  constructor(private stateService: StateService) {}

  increment() {
    this.stateService.increment();
  }

  decrement() {
    this.stateService.decrement();
  }
}

১.৩ HTML টেমপ্লেট

<ion-content>
  <ion-button (click)="increment()">Increment</ion-button>
  <ion-button (click)="decrement()">Decrement</ion-button>
  <p>Counter: {{ counter$ | async }}</p>
</ion-content>

• counter$ | async: async পাইপ ব্যবহার করে আমরা counter$ Observable এর মান পেতে পারি এবং UI-তে দেখাতে পারি।

২. NgRx State Management

NgRx হলো একটি জনপ্রিয় State Management লাইব্রেরি যা Angular অ্যাপ্লিকেশনের স্টেট ম্যানেজমেন্টের জন্য ব্যবহার করা হয়। এটি Redux থেকে অনুপ্রাণিত এবং এতে Store, Actions, Reducers, এবং Effects থাকে যা অ্যাপ্লিকেশনের স্টেট পরিচালনা করতে ব্যবহৃত হয়।

২.১ NgRx Setup

প্রথমে, NgRx ইনস্টল করতে হবে:

ng add @ngrx/store

২.২ State মডিউল তৈরি করা

counter.reducer.ts ফাইল তৈরি করুন:

import { createReducer, on } from '@ngrx/store';
import { increment, decrement } from './counter.actions';

export const initialState = 0;

const _counterReducer = createReducer(
  initialState,
  on(increment, state => state + 1),
  on(decrement, state => state - 1)
);

export function counterReducer(state: number | undefined, action: any) {
  return _counterReducer(state, action);
}

২.৩ Actions তৈরি করা

counter.actions.ts ফাইল তৈরি করুন:

import { createAction } from '@ngrx/store';

export const increment = createAction('[Counter] Increment');
export const decrement = createAction('[Counter] Decrement');

২.৪ Store সেটআপ করা

app.module.ts ফাইলে NgRx Store সেটআপ করুন:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { StoreModule } from '@ngrx/store';
import { counterReducer } from './counter.reducer';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    StoreModule.forRoot({ counter: counterReducer })
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

২.৫ কম্পোনেন্টে Store ব্যবহার করা

counter.component.ts ফাইলে Store এর মাধ্যমে স্টেট ব্যবহারের উদাহরণ:

import { Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { increment, decrement } from './counter.actions';

@Component({
  selector: 'app-counter',
  templateUrl: './counter.component.html',
  styleUrls: ['./counter.component.scss'],
})
export class CounterComponent {
  counter$ = this.store.select('counter');

  constructor(private store: Store<{ counter: number }>) {}

  increment() {
    this.store.dispatch(increment());
  }

  decrement() {
    this.store.dispatch(decrement());
  }
}

২.৬ HTML টেমপ্লেট

<ion-content>
  <ion-button (click)="increment()">Increment</ion-button>
  <ion-button (click)="decrement()">Decrement</ion-button>
  <p>Counter: {{ counter$ | async }}</p>
</ion-content>

উপসংহার

• Service-based State Management: সহজ এবং ছোট অ্যাপ্লিকেশনের জন্য ভালো, যেখানে স্টেট সাধারণত একক সার্ভিসের মাধ্যমে শেয়ার করা হয়।
• NgRx State Management: বড় এবং স্কেলেবল অ্যাপ্লিকেশনগুলির জন্য উপযুক্ত যেখানে একাধিক অ্যাকশন, রিডিউসার, এবং সাইড এফেক্টস ব্যবহৃত হয়।

উপরোক্ত পদ্ধতিগুলির মাধ্যমে আপনি অ্যাপ্লিকেশনের স্টেট ম্যানেজমেন্ট করতে পারেন এবং বিভিন্ন কম্পোনেন্টে সেই স্টেট শেয়ার করতে পারবেন।